<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/src/css/swiper-bundle.min.css" />
  </head>
  <body>
    <style>
      body {
        background-color: #fff;
      }

      .swiper-container { 
        width: 600px;
        height: 340px;
        margin: 30px auto;
      }

      .swiper1 {
        width: 600px;
        height: 300px;
      }
      .swiper .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .swiper2 {
        width: 600px;
        height: 40px;
        margin-left: 0;
      }

      .swiper2 .swiper-slide {
        color: #000;
        text-align: center;
        line-height: 40px;

      }

      .swiper2 .swiper-slide-thumb-active {
        background-color: skyblue;
      }
    </style>

    <div class="swiper-container">
      <!-- 小缩略图 -->
      <div class="swiper swiper2">
        <div class="swiper-wrapper">
          <div class="swiper-slide">第1项</div>
          <div class="swiper-slide">第2项</div>
          <div class="swiper-slide">第3项</div>
          <div class="swiper-slide">第4项</div>
          <div class="swiper-slide">第5项</div>
        </div>
      </div>

      <!-- 大图轮播 -->
      <div class="swiper swiper1">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="/src/img/grid/01.png" /></div>

          <div class="swiper-slide"><img src="/src/img/grid/02.png" /></div>

          <div class="swiper-slide"><img src="/src/img/grid/03.png" /></div>

          <div class="swiper-slide"><img src="/src/img/grid/04.png" /></div>

          <div class="swiper-slide"><img src="/src/img/grid/05.png" /></div>
        </div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>

        <div class="swiper-button-next"></div>
      </div>
    </div>

    <script src="/src/js/swiper-bundle.min.js"></script>

    <script>
      // 缩略图轮播  一定要在 大图轮播图前初始化
      var thumbsSwiper = new Swiper(".swiper2", {
        direction: "horizontal", // 垂直切换选项
        spaceBetween: 10,
        slidesPerView: 5,
        watchSlidesVisibility: true /*避免出现bug*/,
      });

      //   大图轮播
      var mySwiper = new Swiper(".swiper1", {
        direction: "horizontal", // 垂直切换选项
        // loop: true, // 循环模式选项
        thumbs: {
          swiper: thumbsSwiper,
        },
        slideThumbActiveClass: "my-slide-thumb-active",

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </body>
</html>
